<template>
  <div class="demo">
    <div class="container-fluid">
      <div class="row navbarBgColor whiteColor">
        <div class="col-8 d-flex">
          <span class="navbar-brand align-self-center"
            >中远海洋集团能源运输股份有限公司</span
          >
        </div>
        <div class="col-4 row container-fluid">
          <div class="col-6 align-items-end align-self-center"></div>
          <div class="col-3 align-items-end align-self-center">中/英文</div>
          <div class="col-3 align-items-end align-self-center">
            <img src="/img/demo/icon/icon_function.svg" />功能说明
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="row welcomeHeight">
          <div class="col-4 d-flex">
            <div class="align-self-center">
              <a onclick="goPage(0);return false;">
                <img src="/img/demo/icon/logo_cosco.svg" />
              </a>
            </div>
          </div>
          <div class="col-8 d-flex welcomeL">
            <div class="align-self-center" id="userInfo">test</div>
          </div>
        </div>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#005067"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
            <el-menu-item index="1-4-2">选项1</el-menu-item>
            <el-menu-item index="1-4-3">选项1</el-menu-item>
            <el-menu-item index="1-4-4">选项1</el-menu-item>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="right">
        <div class="col-10">
          <div class="row welcomeHeight">
            <div
              class="col-10 welcomeM d-flex justify-content-center"
              id="shipVoyageReaserchContainer"
            >
              <!-- <span class="align-self-center">
              <h2>船舶实时在线监控系统</h2>
            </span> -->
              <div class="align-self-center" style="width: 40%">
                <span>
                  <h2 id="pageTitle">船舶实时状态在线监控</h2>
                </span>
              </div>
              <div class="input-group align-self-center" style="width: 25%">
                <input
                  id="searchShipName"
                  type="text"
                  class="form-control"
                  placeholder="船舶名称"
                  aria-describedby="basic-addon1"
                />
                <div class="input-group-prepend">
                  <button
                    class="input-group-text bi-search"
                    id="basic-addon1"
                    onclick="reaserchByShipNameOrIMO();"
                  ></button>
                </div>
              </div>
              <div class="align-self-center" style="width: 10%"></div>
              <div class="input-group align-self-center" style="width: 25%">
                <input
                  id="searchVoyagenumber"
                  type="text"
                  class="form-control"
                  placeholder="航次号"
                  aria-describedby="basic-addon1"
                />
                <div class="input-group-prepend">
                  <button
                    class="input-group-text bi-search"
                    id="basic-addon1"
                    onclick="reaserchByShipNameOrIMO();"
                  ></button>
                </div>
              </div>
            </div>
            <div class="col-2 welcomeL d-flex justify-content-center">
              <div class="align-self-center">
                <img src="/img/demo/icon/icon_time.svg" /><br />
              </div>
              <div
                class="align-self-center"
                style="font-size: 0.75em"
                id="datetime"
              >
                2021-12-08 09:59:51
              </div>
            </div>
          </div>
          <div class="row shipInfo">
            <div style="width: 10%">
              <div class="row shipInfoCol d-flex align-self-center">
                <div class="col-4 d-flex align-self-center">
                  <img src="/img/demo/icon/top_01.svg" />
                </div>
                <div class="col-8 d-flex align-self-center" id="shipName">
                  实验船1
                </div>
              </div>
            </div>
            <div style="width: 12%">
              <div class="row shipInfoCol d-flex align-self-center">
                <div class="col-4 d-flex align-self-center">
                  <img src="/img/demo/icon/top_02.svg" />
                </div>
                <div class="col-8 d-flex align-self-center" id="llspeed">
                  00.00.00 N<br />00.00.00 E<br />航速(GPS):12.5海里<br />航速(计程仪):
                </div>
              </div>
            </div>
            <div style="width: 12%">
              <div class="row shipInfoCol d-flex align-self-center">
                <div class="col-5 d-flex align-self-center align-items-center">
                  <img src="/img/demo/icon/top_03.svg" />
                </div>
                <div class="col-7 d-flex align-self-center" id="deep">0.0</div>
              </div>
            </div>
            <div style="width: 17%">
              <div class="row shipInfoCol d-flex align-self-center">
                <div class="col-4 d-flex align-self-center">
                  <img src="/img/demo/icon/top_04.svg" style="width: 100px" />
                </div>
                <div class="col-4 d-flex align-self-center" id="avgDeep">
                  0.0
                </div>
                <div class="col-4 d-flex align-self-center" id="avgWaterDiff">
                  0.00
                </div>
              </div>
            </div>
            <div style="width: 17%">
              <div class="row shipInfoCol">
                <div class="col-1"></div>
                <div class="col-10 d-flex align-self-center">
                  <div class="align-self-center" id="leftInclination">
                    左倾角：<br />0.1Deg
                  </div>
                  <img src="/img/demo/icon/top_05.svg" style="width: 100px" />
                  <div class="align-self-center" id="rightInclination">
                    0.00°
                  </div>
                </div>
                <div class="col-1"></div>
              </div>
            </div>
            <div class="align-self-center" style="width: 14%">
              <div class="row shipInfoCol d-flex align-self-center">
                <div class="col-5 d-flex align-self-center align-items-center">
                  <img src="/img/demo/icon/top_06.svg" style="width: 100px" />
                </div>
                <div class="col-7 d-flex align-self-center" id="windDirection">
                  风向：NW<br />风速：米/秒
                </div>
              </div>
            </div>
            <div class="align-self-center" style="width: 18%">
              <div class="row shipInfoCol d-flex align-self-center">
                <div class="col-4 d-flex align-self-center align-items-center">
                  <img src="/img/demo/icon/top_07.svg" />
                </div>
                <div class="col-8 d-flex align-self-center" id="leftHost">
                  左主机<br />转速: RPM<br />负荷: KW<br />轴功率: KN.M
                </div>
                <!-- <div class="col-5 d-flex align-self-center" id="rightHost">右主机<br />转速: RPM<br />负荷: KW<br />轴功率: KN.M
              </div> -->
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <div id="mapcontainer" class="mapcontainer">
                <meta charset="UTF-8" />

                <div class="row">
                  <div class="col-3 fixPaddingall1 standHeight">
                    <div class="row rowEmpty05"></div>
                    <div class="row rounded statusView">
                      <div class="col-12">
                        <div class="row rowEmpty"></div>
                        <div class="row">
                          <div
                            class="col-12 d-flex justify-content-center statusTitle"
                          >
                            船舶油水实时存量
                          </div>
                        </div>
                        <div class="row rowEmpty"></div>
                        <div class="row">
                          <div class="col-1"></div>
                          <div class="col-3 fixPadding">
                            <img src="/img/demo/icon/icon_storage.svg" />总仓容
                          </div>
                          <div class="col-3 fixPadding">
                            <img
                              src="/img/demo/icon/logo_timestock.svg"
                            />实时存量
                          </div>
                          <div class="col-3 fixPadding">
                            单位: <img src="/img/demo/icon/icon_cube.svg" />
                          </div>
                          <div class="col-1"></div>
                        </div>
                        <div class="row">
                          <div class="col-3 d-flex flex-column">
                            <div class="align-self-center" id="gas_oil_tank">
                              4600.0
                            </div>
                            <div class="statusViewContainer">
                              <div
                                id="gas_oil_bar"
                                class="statusViewItem statusViewItemBg1 d-flex justify-content-center"
                              >
                                <div style="color: white" id="gas_oil">
                                  38.0m3
                                </div>
                              </div>
                            </div>
                            <div class="align-self-center">燃料油</div>
                          </div>
                          <div class="col-3 d-flex flex-column">
                            <div class="align-self-center" id="diesel_oil_tank">
                              613.45
                            </div>
                            <div
                              class="statusViewContainer"
                              style="background-color: #eaf3fc"
                            >
                              <div
                                id="diesel_oil_bar"
                                class="statusViewItem statusViewItemBg2 d-flex justify-content-center"
                              >
                                <div style="color: white" id="diesel_oil">
                                  38.0m3
                                </div>
                              </div>
                            </div>
                            <div class="align-self-center">柴油</div>
                          </div>
                          <div class="col-3 d-flex flex-column">
                            <div class="align-self-center" id="lub_oil_tank">
                              613.45
                            </div>
                            <div class="statusViewContainer">
                              <div
                                id="lub_oil_bar"
                                class="statusViewItem statusViewItemBg3 d-flex justify-content-center"
                              >
                                <div style="color: white" id="lub_oil">
                                  38.0m3
                                </div>
                              </div>
                            </div>
                            <div class="align-self-center">润滑油</div>
                          </div>
                          <div class="col-3 d-flex flex-column">
                            <div
                              class="align-self-center"
                              id="drink_water_tank"
                            >
                              613.45
                            </div>
                            <div class="statusViewContainer">
                              <div
                                id="drink_water_bar"
                                class="statusViewItem statusViewItemBg4 d-flex justify-content-center"
                              >
                                <div style="color: white" id="drink_water">
                                  38.0m3
                                </div>
                              </div>
                            </div>
                            <div class="align-self-center">淡水</div>
                          </div>
                        </div>
                        <div class="row rowEmpty"></div>
                        <div class="row">
                          <div class="col-1"></div>
                          <div class="col-3 fixPadding">
                            <img src="/img/demo/icon/icon_storage.svg" />总仓容
                          </div>
                          <div class="col-3 fixPadding">
                            <img
                              src="/img/demo/icon/logo_timestock.svg"
                            />实时存量
                          </div>
                          <div class="col-3 fixPadding">
                            单位: <img src="/img/demo/icon/icon_cube.svg" />
                          </div>
                          <div class="col-1"></div>
                        </div>
                        <div class="row">
                          <div class="col-3 d-flex flex-column">
                            <div class="align-self-center" id="cargo_oil_tank">
                              613.45
                            </div>
                            <div class="statusViewContainer">
                              <div
                                id="cargo_oil_bar"
                                class="statusViewItem statusViewItemBg5 d-flex justify-content-center"
                              >
                                <div style="color: white" id="cargo_oil">
                                  38.0m3
                                </div>
                              </div>
                            </div>
                            <div class="text-center">
                              货油<br />
                              实施存量
                            </div>
                          </div>
                          <div class="col-3 d-flex flex-column">
                            <div class="align-self-center" id="load_water_tank">
                              613.45
                            </div>
                            <div class="statusViewContainer">
                              <div
                                id="load_water_bar"
                                class="statusViewItem statusViewItemBg6 d-flex justify-content-center"
                              >
                                <div style="color: white" id="load_water">
                                  38.0m3
                                </div>
                              </div>
                            </div>
                            <div class="text-center">
                              压载水<br />
                              实施存量
                            </div>
                          </div>
                          <div class="col-3 d-flex flex-column">
                            <div
                              class="align-self-center"
                              id="cargo_sewage_water_tank"
                            >
                              613.45
                            </div>
                            <div class="statusViewContainer">
                              <div
                                id="cargo_sewage_water_bar"
                                class="statusViewItem statusViewItemBg7 d-flex justify-content-center"
                              >
                                <div
                                  style="color: white"
                                  id="cargo_sewage_water"
                                >
                                  0
                                </div>
                              </div>
                            </div>
                            <div class="text-center">
                              货油舱<br />
                              污油水<br />
                              存量
                            </div>
                          </div>
                          <div class="col-3 d-flex flex-column">
                            <div
                              class="align-self-center"
                              id="engine_sewage_water_tank"
                            >
                              613.45
                            </div>
                            <div class="statusViewContainer">
                              <div
                                id="engine_sewage_water_bar"
                                class="statusViewItem statusViewItemBg8 d-flex justify-content-center"
                              >
                                <div
                                  style="color: white"
                                  id="engine_sewage_water"
                                >
                                  0
                                </div>
                              </div>
                            </div>
                            <div class="text-center">
                              机舱<br />
                              污油水<br />
                              存量
                            </div>
                          </div>
                        </div>
                        <div class="row rowEmpty"></div>
                        <div class="row">
                          <div
                            class="col-12 d-flex justify-content-center statusTitle"
                          >
                            防污染设备设备实时状态
                          </div>
                        </div>
                        <div class="row rowEmpty"></div>
                        <div class="row rowEmpty"></div>
                        <div class="row">
                          <div class="col-1"></div>
                          <div class="col-10 d-flex flex-column">
                            <div class="row statusMachine">
                              <div class="col-9 align-self-center">
                                压载水处理装置运行
                              </div>
                              <div
                                class="col-3 align-self-center"
                                id="digital_status32"
                              >
                                <img src="/img/demo/icon/light_gre.svg" />
                              </div>
                            </div>
                            <div class="row rowEmpty08"></div>
                            <div class="row statusMachine">
                              <div class="col-9 align-self-center">
                                机舱油水分离器
                              </div>
                              <div
                                class="col-3 align-self-center"
                                id="digital_status33"
                              >
                                <img src="/img/demo/icon/light_gre.svg" />
                              </div>
                            </div>
                            <div class="row rowEmpty08"></div>
                            <div class="row statusMachine">
                              <div class="col-9 align-self-center">
                                污油水泵
                              </div>
                              <div
                                class="col-3 align-self-center"
                                id="digital_status34"
                              >
                                <img src="/img/demo/icon/light_gre.svg" />
                              </div>
                            </div>
                            <div class="row rowEmpty08"></div>
                            <div class="row statusMachine">
                              <div class="col-9 align-self-center">
                                污油渣泵
                              </div>
                              <div
                                class="col-3 align-self-center"
                                id="digital_status35"
                              >
                                <img src="/img/demo/icon/light_gre.svg" />
                              </div>
                            </div>
                            <div class="row rowEmpty08"></div>
                            <div class="row statusMachine">
                              <div class="col-9 align-self-center">焚烧炉</div>
                              <div
                                class="col-3 align-self-center"
                                id="digital_status36"
                              >
                                <img src="/img/demo/icon/light_gre.svg" />
                              </div>
                            </div>
                            <div class="row rowEmpty08"></div>
                            <div class="row statusMachine">
                              <div class="col-9 align-self-center">
                                尾气处理装置
                              </div>
                              <div
                                class="col-3 align-self-center"
                                id="digital_status37"
                              >
                                <img src="/img/demo/icon/light_gre.svg" />
                              </div>
                            </div>
                            <div class="row rowEmpty08"></div>
                            <div class="row statusMachine">
                              <div class="col-9 align-self-center">
                                货油舱排油监控装置
                              </div>
                              <div
                                class="col-3 align-self-center"
                                id="digital_status38"
                              >
                                <img src="/img/demo/icon/light_gre.svg" />
                              </div>
                            </div>
                            <div class="row rowEmpty08"></div>
                            <div class="row statusMachine">
                              <div class="col-9 align-self-center">
                                生活污水处理装置
                              </div>
                              <div
                                class="col-3 align-self-center"
                                id="digital_status39"
                              >
                                <img src="/img/demo/icon/light_gre.svg" />
                              </div>
                            </div>
                            <div class="row rowEmpty"></div>
                          </div>
                          <div class="col-1"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-6">
                    <div
                      id="Map"
                      class="Map leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                      tabindex="0"
                      style="position: relative; cursor: default"
                    >
                      <div
                        class="leaflet-pane leaflet-map-pane"
                        style="transform: translate3d(0px, 0px, 0px)"
                      >
                        <div class="leaflet-pane leaflet-tile-pane">
                          <div
                            class="leaflet-layer"
                            style="z-index: 2; opacity: 1"
                          >
                            <div
                              class="leaflet-tile-container leaflet-zoom-animated"
                              style="
                                z-index: 18;
                                transform: translate3d(0px, 0px, 0px) scale(1);
                              "
                            >
                              <img
                                alt=""
                                role="presentation"
                                src="https://tile1.hifleet.com/wmts/google-street-zh/osm_grid/2/3/1.png"
                                class="leaflet-tile leaflet-tile-loaded"
                                style="
                                  width: 256px;
                                  height: 256px;
                                  transform: translate3d(189px, 215px, 0px);
                                  opacity: 1;
                                "
                              /><img
                                alt=""
                                role="presentation"
                                src="https://tile1.hifleet.com/wmts/google-street-zh/osm_grid/2/3/2.png"
                                class="leaflet-tile leaflet-tile-loaded"
                                style="
                                  width: 256px;
                                  height: 256px;
                                  transform: translate3d(189px, 471px, 0px);
                                  opacity: 1;
                                "
                              /><img
                                alt=""
                                role="presentation"
                                src="https://tile2.hifleet.com/wmts/google-street-zh/osm_grid/2/2/1.png"
                                class="leaflet-tile leaflet-tile-loaded"
                                style="
                                  width: 256px;
                                  height: 256px;
                                  transform: translate3d(-67px, 215px, 0px);
                                  opacity: 1;
                                "
                              /><img
                                alt=""
                                role="presentation"
                                src="https://tile3.hifleet.com/wmts/google-street-zh/osm_grid/2/0/1.png"
                                class="leaflet-tile leaflet-tile-loaded"
                                style="
                                  width: 256px;
                                  height: 256px;
                                  transform: translate3d(445px, 215px, 0px);
                                  opacity: 1;
                                "
                              /><img
                                alt=""
                                role="presentation"
                                src="https://tile4.hifleet.com/wmts/google-street-zh/osm_grid/2/2/2.png"
                                class="leaflet-tile leaflet-tile-loaded"
                                style="
                                  width: 256px;
                                  height: 256px;
                                  transform: translate3d(-67px, 471px, 0px);
                                  opacity: 1;
                                "
                              /><img
                                alt=""
                                role="presentation"
                                src="https://tile5.hifleet.com/wmts/google-street-zh/osm_grid/2/0/2.png"
                                class="leaflet-tile leaflet-tile-loaded"
                                style="
                                  width: 256px;
                                  height: 256px;
                                  transform: translate3d(445px, 471px, 0px);
                                  opacity: 1;
                                "
                              /><img
                                alt=""
                                role="presentation"
                                src="https://tile6.hifleet.com/wmts/google-street-zh/osm_grid/2/3/0.png"
                                class="leaflet-tile leaflet-tile-loaded"
                                style="
                                  width: 256px;
                                  height: 256px;
                                  transform: translate3d(189px, -41px, 0px);
                                  opacity: 1;
                                "
                              /><img
                                alt=""
                                role="presentation"
                                src="https://tile7.hifleet.com/wmts/google-street-zh/osm_grid/2/3/3.png"
                                class="leaflet-tile leaflet-tile-loaded"
                                style="
                                  width: 256px;
                                  height: 256px;
                                  transform: translate3d(189px, 727px, 0px);
                                  opacity: 1;
                                "
                              /><img
                                alt=""
                                role="presentation"
                                src="https://tile8.hifleet.com/wmts/google-street-zh/osm_grid/2/2/0.png"
                                class="leaflet-tile leaflet-tile-loaded"
                                style="
                                  width: 256px;
                                  height: 256px;
                                  transform: translate3d(-67px, -41px, 0px);
                                  opacity: 1;
                                "
                              /><img
                                alt=""
                                role="presentation"
                                src="https://tile9.hifleet.com/wmts/google-street-zh/osm_grid/2/0/0.png"
                                class="leaflet-tile leaflet-tile-loaded"
                                style="
                                  width: 256px;
                                  height: 256px;
                                  transform: translate3d(445px, -41px, 0px);
                                  opacity: 1;
                                "
                              /><img
                                alt=""
                                role="presentation"
                                src="https://tile10.hifleet.com/wmts/google-street-zh/osm_grid/2/2/3.png"
                                class="leaflet-tile leaflet-tile-loaded"
                                style="
                                  width: 256px;
                                  height: 256px;
                                  transform: translate3d(-67px, 727px, 0px);
                                  opacity: 1;
                                "
                              /><img
                                alt=""
                                role="presentation"
                                src="https://tile1.hifleet.com/wmts/google-street-zh/osm_grid/2/0/3.png"
                                class="leaflet-tile leaflet-tile-loaded"
                                style="
                                  width: 256px;
                                  height: 256px;
                                  transform: translate3d(445px, 727px, 0px);
                                  opacity: 1;
                                "
                              />
                            </div>
                          </div>
                        </div>
                        <div class="leaflet-pane leaflet-shadow-pane"></div>
                        <div class="leaflet-pane leaflet-overlay-pane">
                          <canvas
                            id="505"
                            class="leaflet-zoom-animated"
                            width="668"
                            height="905"
                            style="
                              transform: translate3d(-56px, -75px, 0px);
                              width: 668px;
                              height: 905px;
                            "
                          ></canvas
                          ><canvas
                            id="411"
                            class="leaflet-zoom-animated"
                            width="668"
                            height="905"
                            style="
                              transform: translate3d(-56px, -75px, 0px);
                              width: 668px;
                              height: 905px;
                            "
                          ></canvas>
                        </div>
                        <div class="leaflet-pane leaflet-marker-pane"></div>
                        <div class="leaflet-pane leaflet-tooltip-pane"></div>
                        <div class="leaflet-pane leaflet-popup-pane"></div>
                        <div class="leaflet-proxy leaflet-zoom-animated"></div>
                      </div>
                      <div class="leaflet-control-container">
                        <div class="leaflet-top leaflet-left"></div>
                        <div class="leaflet-top leaflet-right"></div>
                        <div class="leaflet-bottom leaflet-left">
                          <div class="leaflet-control-scale leaflet-control">
                            <div
                              class="leaflet-control-scale-line"
                              style="width: 170px"
                            >
                              3000 nm
                            </div>
                          </div>
                        </div>
                        <div class="leaflet-bottom leaflet-right">
                          <div
                            class="leaflet-control-attribution leaflet-control"
                          >
                            <a
                              href="https://leafletjs.com"
                              title="A JS library for interactive maps"
                              >Leaflet</a
                            >
                            | Licensed by ©
                            <a href="https://www.hifleet.com">hiFleet.com</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-3 fixPaddingall1">
                    <div class="row rowEmpty05"></div>
                    <div class="row rounded statusView standHeight">
                      <div class="col-12">
                        <div class="row rowEmpty"></div>
                        <div class="row">
                          <div
                            class="col-12 d-flex justify-content-center statusTitle"
                          >
                            主要机电设备实时状态
                          </div>
                        </div>
                        <div class="row rowEmpty"></div>
                        <div class="row">
                          <div class="col-1"></div>
                          <div class="col-10 statusMachineRight">
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div
                                class="col-12 d-flex justify-content-center statusSubTitle"
                              >
                                主机
                              </div>
                            </div>
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div class="col-12 d-flex justify-content-center">
                                <img
                                  id="digital_status0"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>&nbsp;&nbsp;主机</span>
                              </div>
                              <!-- <div class="col-2 d-flex justify-content-center"><img src="/img/demo/icon/line_spacer.svg"></div> -->
                              <!-- <div class="col-5"><img id="data37" src="/img/demo/icon/light_gen.svg"><span>&nbsp;&nbsp;右主机</span></div> -->
                            </div>
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div class="col-5">
                                <img
                                  id="digital_status10"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>&nbsp;&nbsp;辅助风机1</span>
                              </div>
                              <div class="col-2 d-flex justify-content-center">
                                <img src="/img/demo/icon/line_spacer.svg" />
                              </div>
                              <div class="col-5">
                                <img
                                  id="digital_status11"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>&nbsp;&nbsp;辅助风机2</span>
                              </div>
                            </div>
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div class="col-5">
                                <img
                                  id="digital_status8"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>&nbsp;&nbsp;舵机1</span>
                              </div>
                              <div class="col-2 d-flex justify-content-center">
                                <img src="/img/demo/icon/line_spacer.svg" />
                              </div>
                              <div class="col-5">
                                <img
                                  id="digital_status9"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>&nbsp;&nbsp;舵机2</span>
                              </div>
                            </div>
                            <div class="row rowEmpty"></div>
                          </div>
                          <div class="col-1"></div>
                        </div>
                        <div class="row rowEmpty"></div>
                        <div class="row">
                          <div class="col-1"></div>
                          <div class="col-10 statusMachineRight">
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div
                                class="col-12 d-flex justify-content-center statusSubTitle"
                              >
                                发电机
                              </div>
                            </div>
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div
                                class="col-12 fixPaddingall d-flex justify-content-center"
                              >
                                <img
                                  id="digital_status1"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>1#发电机</span>
                                <img src="/img/demo/icon/line_spacer.svg" />
                                <img
                                  id="digital_status2"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>2#发电机</span>
                                <img src="/img/demo/icon/line_spacer.svg" />
                                <img
                                  id="digital_status3"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>3#发电机</span>
                                <img src="/img/demo/icon/line_spacer.svg" />
                                <img
                                  id="digital_status4"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>4#发电机</span>
                              </div>
                              <!-- <div class="col-1 d-flex justify-content-center"><img src="/img/demo/icon/line_spacer.svg"/></div>
            <div class="col-3 fixPaddingall"><img id="data39" src="/img/demo/icon/light_gen.svg"/><span>2#发电机</span></div>
            <div class="col-1 d-flex justify-content-center"><img src="/img/demo/icon/line_spacer.svg"/></div>
            <div class="col-3 fixPaddingall"><img id="data40" src="/img/demo/icon/light_gen.svg"/><span>3#发电机</span></div>
            <div class="col-1"></div> -->
                            </div>
                            <div class="row rowEmpty"></div>
                          </div>
                          <div class="col-1"></div>
                        </div>
                        <div class="row rowEmpty"></div>
                        <div class="row">
                          <div class="col-1"></div>
                          <div class="col-10 statusMachineRight">
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div
                                class="col-12 d-flex justify-content-center statusSubTitle"
                              >
                                锅 炉
                              </div>
                            </div>
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div class="col-3 fixPaddingall">
                                <img
                                  id="digital_status5"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>1#锅炉</span>
                              </div>
                              <div class="col-1 d-flex justify-content-center">
                                <img src="/img/demo/icon/line_spacer.svg" />
                              </div>
                              <div class="col-3 fixPaddingall">
                                <img
                                  id="digital_status6"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>2#锅炉</span>
                              </div>
                              <div class="col-1 d-flex justify-content-center">
                                <img src="/img/demo/icon/line_spacer.svg" />
                              </div>
                              <div class="col-3 fixPaddingall">
                                <img
                                  id="digital_status7"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>辅助锅炉</span>
                              </div>
                              <div class="col-1"></div>
                            </div>
                            <div class="row rowEmpty"></div>
                          </div>
                          <div class="col-1"></div>
                        </div>
                        <div class="row rowEmpty"></div>
                        <div class="row">
                          <div class="col-1"></div>
                          <div class="col-10 statusMachineRight">
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div
                                class="col-12 d-flex justify-content-center statusSubTitle"
                              >
                                压载水泵
                              </div>
                            </div>
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div
                                class="col-5 d-flex justify-content-center fixPaddingall"
                              >
                                <img
                                  id="digital_status20"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>1#压载水泵</span>
                              </div>
                              <div class="col-2 d-flex justify-content-center">
                                <img src="/img/demo/icon/line_spacer.svg" />
                              </div>
                              <div
                                class="col-5 d-flex justify-content-center fixPaddingall"
                              >
                                <img
                                  id="digital_status21"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>2#压载水泵</span>
                              </div>
                            </div>
                            <div class="row rowEmpty"></div>
                          </div>
                          <div class="col-1"></div>
                        </div>
                        <div class="row rowEmpty"></div>
                        <div class="row">
                          <div class="col-1"></div>
                          <div class="col-10 statusMachineRight">
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div
                                class="col-12 d-flex justify-content-center statusSubTitle"
                              >
                                货油泵运行状态
                              </div>
                            </div>
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div
                                class="col-5 d-flex justify-content-center fixPaddingall"
                              >
                                <img
                                  id="digital_status14"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>1#货油泵</span>
                              </div>
                              <div class="col-2 d-flex justify-content-center">
                                <img src="/img/demo/icon/line_spacer.svg" />
                              </div>
                              <div
                                class="col-5 d-flex justify-content-center fixPaddingall"
                              >
                                <img
                                  id="digital_status15"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>2#货油泵</span>
                              </div>
                            </div>
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div
                                class="col-5 d-flex justify-content-center fixPaddingall"
                              >
                                <img
                                  id="digital_status16"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>3#货油泵</span>
                              </div>
                              <div class="col-2 d-flex justify-content-center">
                                <img src="/img/demo/icon/line_spacer.svg" />
                              </div>
                              <div
                                class="col-5 d-flex justify-content-center fixPaddingall"
                              >
                                <img
                                  id="digital_status17"
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>4#货油泵</span>
                              </div>
                            </div>
                            <div class="row rowEmpty"></div>
                          </div>
                          <div class="col-1"></div>
                        </div>
                        <div class="row rowEmpty"></div>
                        <div class="row">
                          <div class="col-1"></div>
                          <div class="col-10 statusMachineRight">
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div
                                class="col-12 d-flex justify-content-center statusSubTitle"
                              ></div>
                            </div>
                            <div class="row rowEmpty"></div>
                            <div class="row">
                              <div class="col-4 fixPaddingall">
                                <img src="/img/demo/icon/light_gen.svg" /><span
                                  >应急消防泵</span
                                >
                              </div>
                              <div class="col-4 fixPaddingall">
                                <img src="/img/demo/icon/line_spacer.svg" /><img
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>1#主消防泵</span>
                              </div>
                              <div class="col-4 fixPaddingall">
                                <img src="/img/demo/icon/line_spacer.svg" /><img
                                  src="/img/demo/icon/light_gen.svg"
                                /><span>2#主消防泵</span>
                              </div>
                            </div>
                            <div class="row rowEmpty"></div>
                          </div>
                          <div class="col-1"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped lang="scss">
@import "./css/bootstrap-datetimepicker.min.css";
// @import "./css/bootstrap-icons.css";
@import "./css/bootstrap.min.css";
@import "./css/hifleet.css";
@import "./css/layer.css";
@import "./css/main.css";
@import "./css/map.css";
.demo {
  .content {
    display: flex;
    .left {
      width: 300px;
    }
    .right {
      flex: 1;
    }
  }
}
</style>
